<template>
  <div>
    <el-container>
      <el-header
        style="display:flex;align-items: center;justify-content: space-between;padding: 10px;border-bottom: 1px solid #f2f2f2;"
      >
        <div>
          <svg-icon class="primary" :icon-class="$route.meta.icon" />
          <span class="primary">{{companyForm.name}}</span>
        </div>
        <div class="header-button-container">
          <el-button @click="toAddCustomers" type="primary" icon="el-icon-plus" v-permission="['companyEmployee.recharge']">新增账号</el-button>
          <el-button @click="rechargeClick" type="primary" icon="el-icon-plus" v-permission="['companyEmployee.recharge']">充值</el-button>
          <el-button
            :icon="queryType? 'el-icon-search':'el-icon-close'"
            type="primary"
            @click="chooseClick"
          >{{queryType == false?'隐藏':'查询'}}</el-button>

          <!--<el-button v-permission="['companyList.add']" icon="el-icon-upload2" type="info" style="margin-left: 10px"-->
            <!--@click="addClick" >导入员工</el-button>-->
          <!--&lt;!&ndash; <el-button @click="rechargeDetailClick" type="info" icon="el-icon-plus" v-permission="['companyEmployee.rechargeList']">充值明细</el-button> &ndash;&gt;-->
            <!--<ExportList2Excel v-permission="['companyList.export']" ref="exportList2Excel" @handleExport="handleExport" />-->
        </div>
      </el-header>
      <div class="pd10">
        <!-- <div style="display: flex;align-items: center" class="deleted_OrderHeader"> -->
        <el-card class="box-card" style="margin-bottom:10px">
          <div class="deleted_OrderHeader">
            <el-row :gutter="24">
              <!--<el-col :span="8">-->
                <!--<span class="deleted_Row_Headings">员工数:</span>-->
                <!--<span class="deleted_OrderTitle">{{companyForm.num}}</span>-->
              <!--</el-col>-->
              <!-- <el-col :span="8">
                <span class="deleted_Row_Headings">企业余额:</span>
                <span class="deleted_OrderTitle">{{companyForm.balance}}</span>
              </el-col> -->
              <el-col :span="8">
                <span class="deleted_Row_Headings">福利金余额:</span>
                <span class="deleted_OrderTitle">{{companyForm.welfare}}</span>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <!-- </div> -->
        <div style="margin-bottom: 10px;display: flex;align-items: center" v-show="queryType == false">
          <el-input
            prefix-icon="el-icon-search"
            placeholder="手机号码"
            style="width: 200px"
            v-model="query.mobile"
            v-show="activeName != 'third'"
          ></el-input>
          <el-input
            prefix-icon="el-icon-search"
            placeholder="用户名"
            style="width: 200px;margin-left: 10px"
            v-model="query.name"
            v-show="activeName != 'third'"
          ></el-input>
          <el-select v-model="query.vip" v-show="activeName != 'third'" placeholder="请选择级别" style="width: 200px;margin-left: 10px">
            <el-option label="vip0" value="0" />
            <el-option label="vip1" value="1" />
            <el-option label="vip2" value="2" />
            <el-option label="vip3" value="3" />
            <el-option label="vip4" value="4" />
            <el-option label="vip5" value="5" />
          </el-select>
          <el-date-picker v-model="query.createYear" type="year" placeholder="选择年份" style="width: 200px;margin-left: 10px" v-show="activeName == 'third'">
            </el-date-picker>
            <el-input prefix-icon="el-icon-search" placeholder="福利卡名称" style="width: 200px;margin-left: 10px"
                      v-model="query.memo" v-show="activeName == 'third'"></el-input>
          <el-button
            v-permission="['companyList.query']"
            style="margin-left: 10px"
            icon="el-icon-search"
            type="primary"
            @click="queryClick"
          >查询</el-button>
          <el-button
            style="margin-left: 10px"
            icon="el-icon-refresh-right"
            type="info"
            @click="resetClick"
          >重置</el-button>
        </div>
        <el-tabs v-model="activeName" type="border-card" @tab-click="tabChangeClick">
          <el-tab-pane label="账号信息" name="first">
            <el-table ref="table" v-loadMore="[payLoads,'member-list']"  :data="memberData" border
                      stripe :height="curHeight" style="width: 100%;">
              <el-table-column type="index" width="50" align="center" fixed/>
              <el-table-column sortable label="账号" width="120" align="center" headerAlign="center" prop="mobile"/>
              <el-table-column sortable label="名称" width="180" align="left" headerAlign="center" prop="name"/>
              <el-table-column sortable label="会员号" width="100" align="center" prop="code" headerAlign="center"/>
              <el-table-column label="所属门店" width="130" align="left" prop="shopName" headerAlign="center"/>
              <el-table-column sortable label="等级" width="80" align="center" headerAlign="center" prop="vip">
                <template slot-scope="scope">
                  <span>{{ scope.row.vipName }}</span>
                </template>
              </el-table-column>

              <!-- <el-table-column label="充值卡" width="80" prop="amount" align="right"  headerAlign="center">
                <template slot-scope="scope">
                  <span>{{ Number(scope.row.balance).toFixed(2) }}</span>
                </template>
              </el-table-column>

              <el-table-column label="金币" width="80" prop="point" align="right"  headerAlign="center"></el-table-column> -->

              <el-table-column label="消费金额" width="80" prop="amount" align="right" headerAlign="center">
                <template slot-scope="scope">
                  <span>{{ Number(scope.row.amount).toFixed(2) }}</span>
                </template>
              </el-table-column>

              <!--<el-table-column label="绩效金额" width="100" align="right" prop="achieve"></el-table-column>-->

              <el-table-column label="地址" width="300" align="left" headerAlign="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.address }}</span>
                </template>
              </el-table-column>

              <!--<el-table-column label="备用电话" width="180" align="center" prop="phone" />-->
              <!--<el-table-column label="邮箱" width="150" align="center" prop="email" />-->

              <el-table-column sortable label="最近购买日期" width="160" align="left" prop="nearBuyDate" headerAlign="center">
                <template slot-scope="scope">
                  {{ scope.row.nearBuyDate | datetimeFormatter }}
                </template>
              </el-table-column>

              <el-table-column label="会员有效期" width="120" align="center" headerAlign="center">
                <template slot-scope="scope">{{ scope.row.vipExpired | dateFormatter }}</template>
              </el-table-column>

              <el-table-column sortable label="注册时间" width="160" align="center" prop="createDate" headerAlign="center">
                <template slot-scope="scope">
                  {{ scope.row.createDate | datetimeFormatter }}
                </template>
              </el-table-column>

              <el-table-column label="功能" align="center" prop="remark" width="70" fixed="right" headerAlign="center">
                <template slot-scope="scope">
                  <div style="display:flex">
                    <el-tooltip v-show="deleted == false" class="item" effect="dark" content="详情" placement="top-start">
                      <el-button type="primary" size="mini" @click="detailClick(scope.row)">详情</el-button>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center" fixed="right" width="80">
                <template slot-scope="scope">
                  <div>
                    <el-tooltip v-show="deleted == false" v-permission="['member.edit']" class="item" effect="dark"
                                content="编辑" placement="top-start">
                      <a @click="editClick(scope.row)">
                        <i style="color: #409EFF" class="el-icon-edit"/>
                      </a>
                    </el-tooltip>
                    <el-tooltip v-show="deleted == false" v-permission="['member.del']" class="item" effect="dark"
                                content="删除" placement="top-start">
                      <a style="margin-left: 10px" @click="deleteMember(scope.row)">
                        <i style="color: #F56C6C" class="el-icon-delete"/>
                      </a>
                    </el-tooltip>
                    <el-tooltip v-show="deleted == true" v-permission="['member.del']" class="item" effect="dark"
                                content="恢复客户" placement="top-start">
                      <a style="margin-left: 10px" @click="restoreMember(scope.row)">
                        <i style="color: #E6A23C" class="el-icon-refresh-right"/>
                      </a>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="充值记录" name="third">
            <el-table
              :data="rechargeListData"
              border
              stripe
              v-loadMore="[payLoads,'rechargeList']"
              :height="curHeight"
              ref="table"
              style="width: 100%;">
              <el-table-column
                label="福利卡批次号"
                align="center"
                prop="batchNum"
              >
              </el-table-column>
              <el-table-column
                label="福利卡名称"
                align="center"
                prop="memo"
              >
              </el-table-column>
              <el-table-column
                label="充值人数"
                align="center"
                prop="num"
                width="100"
              >
              </el-table-column>
              <!-- <el-table-column
                label="每人福利金额"
                align="center"
                prop="amount"
                width="100"
              >
              </el-table-column> -->
              <el-table-column
                label="福利总金额"
                align="center"
                prop="totalBalance"
                width="100"
              >
              </el-table-column>
              <el-table-column
                label="福利总余额"
                align="center"
                prop="balance"
                width="100"
              >
              </el-table-column>
              <el-table-column
                label="充值到账时间"
                prop="createDate"
                align="center"
              >
                <template slot-scope="scope">
            <span>
              {{ scope.row.createDate | formatDateAndTime}}
            </span>
                </template>
              </el-table-column>
              <el-table-column
                label="有效期开始时间"
                prop="startDate"
                align="center"
              >
                <template slot-scope="scope">
            <span>
              {{ scope.row.startDate | formatDate}}
            </span>
                </template>
              </el-table-column>
              <el-table-column
                label="有效期结束时间"
                prop="endDate"
                align="center"
              >
                <template slot-scope="scope">
            <span>
              {{ scope.row.endDate | formatDate}}
            </span>
                </template>
              </el-table-column>
              <el-table-column label="功能" width="120" align="center">
                <template slot-scope="scope">
                  <el-button
                    @click="rechargeDetailClick(scope.row)"
                    type="primary"
                    size="mini"
                    :loading="scope.row.exportLoding"
                    v-permission="['companyList.export']"
                  >导出充值明细</el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="left" fixed="right" width="60">
                <template slot-scope="scope">
                  <div>
                    <el-tooltip class="item" effect="dark" content="删除福利卡" v-show="deleted == false" placement="top-start">
                      <a style="margin-left: 10px" @click="deleteMember(scope.row)">
                        <i style="color: #F56C6C" class="el-icon-delete"></i>
                      </a>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <!--          <el-tab-pane label="在职员工" name="first">-->
<!--            <el-table :data="memberData" border stripe :height="curHeight" ref="table" v-loadMore="[payLoads,'employee-table1']">-->
<!--              <el-table-column label="手机号码" align="center" prop="mobile"></el-table-column>-->
<!--              <el-table-column label="用户名称" align="center" prop="name"></el-table-column>-->
<!--              <el-table-column label="用户级别" align="center" width="100">-->
<!--                <template slot-scope="scope">-->
<!--                  <span>{{ scope.row.vip | watchVip}}</span>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column label="福利金总额" align="center" prop="welfareBalance" width="100"></el-table-column>-->
<!--              <el-table-column label="功能" width="80" fixed="right" align="center">-->
<!--                <template slot-scope="scope">-->
<!--                    <el-button-->
<!--                    @click="consumptionDetailClick(scope.row)"-->
<!--                    type="primary"-->
<!--                    size="mini"-->
<!--                    v-permission="['companyList.export']"-->
<!--                    >详情</el-button>-->
<!--                </template>-->
<!--                </el-table-column>-->
<!--              <el-table-column label="操作" align="center" fixed="right" width="80">-->
<!--                <template slot-scope="scope">-->
<!--                  <div>-->
<!--                    <el-tooltip-->
<!--                      v-permission="['companyList.edit']"-->
<!--                      class="item"-->
<!--                      effect="dark"-->
<!--                      content="编辑用户"-->
<!--                      v-show="deleted == false"-->
<!--                      placement="top-start"-->
<!--                    >-->
<!--                      <a @click="editClick(scope.row)">-->
<!--                        <i style="color: #409EFF" class="el-icon-edit"></i>-->
<!--                      </a>-->
<!--                    </el-tooltip>-->
<!--                    &lt;!&ndash; <el-tooltip-->
<!--                      v-permission="['companyEmployee.consumption']"-->
<!--                      class="item"-->
<!--                      effect="dark"-->
<!--                      content="消费详情"-->
<!--                      v-show="deleted == false"-->
<!--                      placement="top-start"-->
<!--                    >-->
<!--                      <a style="margin-left: 10px" @click="consumptionDetailClick(scope.row)">-->
<!--                        <i style="color: #409EFF" class="el-icon-document"></i>-->
<!--                      </a>-->
<!--                    </el-tooltip> &ndash;&gt;-->
<!--                    <el-tooltip-->
<!--                      class="item"-->
<!--                      v-permission="['companyList.del']"-->
<!--                      effect="dark"-->
<!--                      content="员工复职"-->
<!--                      v-show="deleted == true"-->
<!--                      placement="top-start"-->
<!--                    >-->
<!--                      <a style="margin-left: 10px" @click="restoreMchCourse(scope.row)">-->
<!--                        <i style="color: #E6A23C" class="el-icon-refresh-right"></i>-->
<!--                      </a>-->
<!--                    </el-tooltip>-->
<!--                    <el-tooltip-->
<!--                      v-permission="['companyList.del']"-->
<!--                      class="item"-->
<!--                      effect="dark"-->
<!--                      content="办理离职"-->
<!--                      v-show="deleted == false"-->
<!--                      placement="top-start"-->
<!--                    >-->
<!--                      <a style="margin-left: 10px" @click="deleteMember(scope.row)">-->
<!--                        <i style="color: #F56C6C" class="el-icon-delete"></i>-->
<!--                      </a>-->
<!--                    </el-tooltip>-->
<!--                  </div>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--            </el-table>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane label="离职员工" name="second">-->
<!--            <el-table-->
<!--              :data="leaveMemberData"-->
<!--              border-->
<!--              stripe-->
<!--              :height="curHeight"-->
<!--              ref="table"-->
<!--              v-loadMore="[payLoads,'employee-table2']"-->
<!--            >-->
<!--              <el-table-column label="手机号码" align="center" prop="mobile"></el-table-column>-->
<!--              <el-table-column label="用户名称" align="center" prop="name"></el-table-column>-->
<!--              <el-table-column label="用户级别" align="center" width="100">-->
<!--                <template slot-scope="scope">-->
<!--                  <span>{{ scope.row.vip | watchVip}}</span>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column label="操作" align="left" fixed="right" width="100">-->
<!--                <template slot-scope="scope">-->
<!--                  <div>-->
<!--                    <el-tooltip-->
<!--                      class="item"-->
<!--                      v-permission="['companyEmployee.del']"-->
<!--                      effect="dark"-->
<!--                      content="恢复客户"-->
<!--                      v-show="deleted == false"-->
<!--                      placement="top-start"-->
<!--                    >-->
<!--                      <a style="margin-left: 10px" @click="restoreMember(scope.row)">-->
<!--                        <i style="color: #E6A23C" class="el-icon-refresh-right"></i>-->
<!--                      </a>-->
<!--                    </el-tooltip>-->
<!--                  </div>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--            </el-table>-->
<!--          </el-tab-pane>-->

        </el-tabs>
      </div>
      <el-footer class="el-footerBox">
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="tabChangeRequest"
        ></pagination>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import permission from "@/directive/permission/index.js"; // 权限判断指令
import { find } from "@/api/company";
// import { list, update,countEmployeeNum } from "@/api/companyEmployee";
import { list, del, updateMember,memberList } from '@/api/member'

import {selectCompanyAllCard, selectCompanyCardDetail, delCompanyCard, getCompanyBalance} from '@/api/cardBill'
import utils from "../../utils/utils.js";
import { EventBus } from "@/api/eventBus";
import Pagination from "@/components/Pagination";
import CategoryPanel from "@/components/CategoryPanel";
import ExportList2Excel from "@/components/ExportList2Excel";
import loadMore from "@/utils/loadMore.js";

export default {
  // name: "employee-list",
  directives: { permission },
  data() {
    return {
      memberData: [], //在职员工表
      leaveMemberData: [], //离职员工表
      rechargeListData:[], //充值明细数据
      pageNum: 1,
      pageSize: 20,
      total: 0,
      status: 1, //1表示在职，0表示离职
      queryType: true,
      query: {
        name: "",
        mobile: "",
        vip: ""
      },
      keyword: {
        name: "",
        mobile: "",
        vip: ""
      },
      queryPhone: "",
      queryName: "",
      curHeight: null,
      excelData: [],
      memberCategoryId: "",
      deleted: false,
      restoreForm: {
        id: "",
        deleted: false
      },
      companyForm: {
        id: "",
        name: "",
        num: 0,
        balance: "",
        welfare: 0
      },
      activeName: "first", //tab的默认值是在职员工
      payLoads: "", //用来保存滚动条的滑动距离
      companyId:"",
      exportLoding: false
    };
  },
  components: { Pagination, CategoryPanel, ExportList2Excel, loadMore },
  created() {
    var _this = this;
    _this.companyId = this.$route.query.id;
    _this.companyForm.name = this.$route.query.companyName;
    // console.info("_this.companyId--" + _this.companyId);
    this.loadMember(_this.companyId);
    this.companyInfo(_this.companyId);
    EventBus.$on("employee-add", res => {
      // 监听新增完毕
      // 更新列表数组
    //   _this.memberData.splice(0, 0, res);
    console.info("企业用户的添加成功")
      this.loadMember(_this.companyId);
      this.companyInfo(_this.companyId);
    });
    EventBus.$on("employee-edit", res => {
      // 监听新增完毕
      // 更新列表数组
      console.info("返回页面的res--" +JSON.stringify(res));
      for (var i = 0; i < _this.memberData.length; i++) {
        if (_this.memberData[i].id == res.id) {
          _this.memberData[i] = res;
        }
      }
    });
    EventBus.$on("recharge", res => {
      // 监听新增完毕
      // 更新列表数组
      console.info("企业用户的充值成功的res--"+JSON.stringify(res))
      this.activeName = "third",
      this.companyId = res.id
       this.getRechargeList()
    });
  },
  activated() {
    // console.info("原来的this.companyId--"+this.companyId)
    // this.companyId = this.$route.query.id
    // console.info("新的this.companyId--"+this.companyId)
    // this.payLoads = new Date().getTime();
  },
  watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
    $route (newVal, oldVal) {
      if (newVal.name=='employee-list' && newVal.query.id!=this.companyId) {
        this.companyForm.name = this.$route.query.companyName;
        this.companyId = this.$route.query.id
        console.info("监听到变化我被执行了")
        this.loadMember(this.companyId);
        this.companyInfo(this.companyId);
      }
    }
  },
  mounted() {
    this.comeIn();
    this.beforeMount();
  },
  filters: {
      formatDateAndTime: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        return y + '-' + MM + '-' + d + " " + h + ":" + m + ":" + s;
      },
    formatDate: function(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d;
    },
    watchGender(val) {
      if (val == 1) {
        return "男";
      } else if (val == 2) {
        return "女";
      } else {
        return "隐藏";
      }
    },
    watchVip(val) {
      if (val == 0) {
        return "vip0";
      } else if (val == 1) {
        return "vip1";
      } else if (val == 2) {
        return "vip2";
      } else if (val == 3) {
        return "vip3";
      } else if (val == 4) {
        return "vip4";
      } else if (val == 5) {
        return "vip5";
      }
    }
  },
  methods: {

    detailClick(row) {
      this.$router.push({
        path: '/company/detaiCustomers', query: {id: row.id}
      })
    },

    //   表格数据的过滤器
      formatList(data){
          if(data.length > 0){
              data.map((item)=>{
                  item.gender = this.watchGender(item.gender)
                  item.vip = this.watchVip(item.vip)
              })
          }
          return data
      },
      watchGender(val) {
      if (val == 1) {
        return "男";
      } else if (val == 2) {
        return "女";
      } else {
        return "隐藏";
      }
    },
    watchVip(val) {
      if (val == 0) {
        return "vip0";
      } else if (val == 1) {
        return "vip1";
      } else if (val == 2) {
        return "vip2";
      } else if (val == 3) {
        return "vip3";
      } else if (val == 4) {
        return "vip4";
      } else if (val == 5) {
        return "vip5";
      }
    },

    //调用数据导出的函数
    handleExport(PageParam) {
      var _this = this;
      if(this.activeName != 'third'){
          let params = new URLSearchParams();
        params.append("pageNum", 1);
        params.append("pageSize", 10000);
        params.append("mobile", _this.keyword.mobile);
        params.append("name", _this.keyword.name);
        params.append("vip", _this.keyword.vip);
        params.append("companyId", _this.companyId);
        params.append("status", _this.status);

        //要导出函数携带的参数
        let data = {};

        if (_this.status == 1) {
            data.tHeader = [ "手机号码", "用户名称", "用户级别", "账号余额" ];
                data.filterVal = ["mobile", "name", "vip", "balance"];
            console.info("我是在职员工的请求被发送了");

            // list(params).then(response => {
            //     data.list = this.formatList(response.data.data);
            //     data.filename = "在职员工表";
            //     _this.$refs.exportList2Excel.handleDownload(data);
            // }).catch(error => {
            //     _this.$refs.exportList2Excel.unlockLoading();
            //     console.log("error!!");
            // });

        } else if (_this.status == 2) {
            data.tHeader = [ "手机号码", "用户名称", "用户级别"];
                data.filterVal = ["mobile", "name", "vip"];
            console.info("我是离职员工的请求被发送了****");
            // list(params).then(response => {
            //     data.list = this.formatList(response.data.data);
            //     data.filename = "离职员工表";
            //     _this.$refs.exportList2Excel.handleDownload(data);
            // }).catch(error => {
            //     _this.$refs.exportList2Excel.unlockLoading();
            //     console.log("error!!");
            // });
        }
      }else{
          let pageInfo = {
            pageNum :  1,
            pageSize :  10000,
        }
        let sendData = {
            companyId : _this.companyId,
            memo : _this.keyword.memo,
            createYear : _this.keyword.createYear
        }
        let data = {};
        data.tHeader = [ "福利卡批次号", "福利卡名称", "充值人数","福利总金额","福利总余额","充值到账时间","有效期开始时间","有效期结束时间"];
        data.filterVal = ["batchNum", "memo", "num","totalBalance","balance","createDate","startDate","endDate"];
        data.filename = _this.companyForm.name+"充值记录表";
        console.log("请求的企业福利卡信息--"+JSON.stringify(sendData) )
        selectCompanyAllCard(pageInfo, sendData).then(response => {
          console.log("请求的企业福利卡信息--"+JSON.stringify(response) )
          data.list = this.formatRechargeList(response.data.data)
          _this.$refs.exportList2Excel.handleDownload(data);
        }).catch(error => {
            _this.$refs.exportList2Excel.unlockLoading();
          console.log('error!!')
        });
      }

    },

    beforeMount() {
      window.onresize = () => {
        return (() => {
          if (this.queryType == false) {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            this.curHeight = h - 446; //减去页面上固定高度height
          } else {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            this.curHeight = h - 400; //减去页面上固定高度height
          }
        })();
      };
    },

    comeIn() {
      console.log("222");
      var h =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 400; //减去页面上固定高度height
    },

    //编辑用户的点击事件
    editClick(row) {
        this.$router.push({
          path: '/company/editCustomers', query: {id: row.id,companyName:this.$route.query.companyName,companyId:this.$route.query.id}
        })
      // this.$router.push({
      //   path: "/company/employeeEdit",
      //   query: { memberId: row.memberId, companyId: row.companyId, id:row.id }
      // });
    },
    //tab切换的数据请求
    tabChangeRequest(){
      if (this.activeName == "first") {
        this.status = 1;
        this.loadMember();
      } else if (this.activeName == "second") {
        console.info("离职人员请求发送了")
        this.status = 2;
        this.loadMember()
      }else if(this.activeName == "third"){
          //获取充值记录的数据
          this.getRechargeList()
      }
    },

    //在职员工和离职员工切换
    tabChangeClick(tab, event) {
      if (tab.name == "first") {
        this.status = 1;
        this.loadMember();
      } else if (tab.name == "second") {
        this.status = 2;
        this.loadMember()
      }else if(tab.name == "third"){
          //获取充值记录的数据
          this.getRechargeList()
      }
    },

    //查询企业的信息，员工数、企业余额、企业福利金余额
    companyInfo(val) {
      var _this = this;
      getCompanyBalance(val)
      .then(response => {
          console.log("请求的企业福利金余额" + JSON.stringify(response));
          if (response.type == "success") {
            _this.companyForm.welfare = response.data;
          } else {
            _this.$message({
              message: response.content,
              offset: 120,
              center: true
            });
          }
        })
        .catch(error => {});
      if(val != null){

        // countEmployeeNum(val).then(response => {
        //   // console.log("企业员工数量" + JSON.stringify(response));
        //   if (response.type == "success") {
        //     _this.companyForm.num = response.data;;
        //   } else {
        //     _this.$message({
        //       message: response.content,
        //       offset: 120,
        //       center: true
        //     });
        //   }
        // })

      }
    },

    //查询企业员工的信息
    loadMember(val) {
        //   console.log("传输过来的企业id" + val);
        var _this = this;
        let params = new URLSearchParams();
        params.append("pageNum", _this.pageNum);
        params.append("pageSize", _this.pageSize);
        params.append("mobile", _this.keyword.mobile);
        params.append("name", _this.keyword.name);
        params.append("vip", _this.keyword.vip);
        params.append("companyId", _this.companyId);
        params.append("status", _this.status);
        if (_this.status == 1) {
            console.info("我是在职员工的请求被发送了");
            list(params).then(response => {
                console.log("请求的会员信息" + JSON.stringify(response));
                _this.memberData = response.data.data;
                _this.total = response.data.total;
                _this.updateScroll();
            })
        } else if (_this.status == 2) {
            // console.info("我是离职员工的请求被发送了****");
            list(params)
            .then(response => {
                  console.log("请求的会员信息" + JSON.stringify(response));
                _this.leaveMemberData = response.data.data;
                _this.total = response.data.total;
            })
            .catch(error => {
                console.log("error!!");
            });
        }
    },

    //获取企业的充值明细
    getRechargeList(){
        console.log("我被执行了，我是福利卡信息")
        var _this = this
        console.log("我被执行了，我是福利卡信息_this.companyId--"+_this.companyId)
        let pageInfo = {
            pageNum :  _this.pageNum,
            pageSize :  _this.pageSize,
        }
        let sendData = {
            companyId : _this.companyId,
            memo : _this.keyword.memo,
            createYear : _this.keyword.createYear
        }
        console.log("请求的企业福利卡信息--"+JSON.stringify(sendData) )
        selectCompanyAllCard(pageInfo, sendData).then(response => {
          console.log("请求的企业福利卡信息--"+JSON.stringify(response) )
          response.data.data.map(item => { return item.exportLoding = false })
          _this.rechargeListData = response.data.data
          _this.total = response.data.total
          _this.updateScroll()
        }).catch(error => {
          console.log('error!!')
        });
    },

    chooseClick() {
      this.queryType = !this.queryType;
      if (this.queryType == false) {
        var h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 446; //减去页面上固定高度height
      } else {
        var h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 400; //减去页面上固定高度height
      }
    },

    addClick() {
      this.$router.push({
        path: "/company/employeeAdd", query:{companyId:this.companyId, companyName:this.companyForm.name}
      });
    },

    rechargeClick() {
      this.$router.push({
        path: "/company/recharge", query:{companyId:this.companyId, companyName:this.companyForm.name}
      });
    },
    toAddCustomers() {
      this.$router.push({
        path: "/company/addCustomers",
        query: { companyId: this.companyId , companyName: this.companyForm.name }
      });
    },

    rechargeDetailClick(row) {
      row.exportLoding = true
      console.log("点击的行信息row"+JSON.stringify(row) )
        var _this = this;

          //要导出函数携带的参数
        let data ={}
        data.tHeader = ["福利卡批次号","福利卡名称","员工姓名","手机号码","充值福利金额","福利金到账时间","有效期开始时间","有效期结束时间"]
        data.filterVal = ["batchNum","memo","name","mobile","balance","createDate","startDate","endDate"]
        data.filename = _this.companyForm.name + "的" + row.batchNum + "号批次的" + row.memo + "充值明细表"
        console.log("导出的数据data"+JSON.stringify(data) )

        let pageInfo = {
            pageNum :  1,
            pageSize :  10000,
        }
        let sendData = {
            companyId : _this.companyId,
            batchNum : row.batchNum
        }
        console.log("请求的企业信息sendData"+JSON.stringify(sendData) )
        selectCompanyCardDetail(pageInfo, sendData).then(response => {
          console.log("请求的企业信息"+JSON.stringify(response))
            data.list = this.formatRechargeList(response.data.data);
            console.log("请求的企业信息data"+JSON.stringify(data))
            _this.$refs.exportList2Excel.handleDownload(data);
            row.exportLoding = false
        }).catch(error => {
          row.exportLoding = false
          console.log('error!!')
        });
    },

    //员工离职事件
    deleteMember(data) {
      console.log(data)
      var _this = this
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(data.id).then(response => {
          console.log(response)
          _this.memberData.forEach(function (item, index) {
            if (item.id == data.id) {
              _this.memberData.splice(index, 1)
            }
          })
          _this.$message({
            message: `删除客户${response.content}`,
            offset: 120,
            center: true
          })
        }).catch(error => {
          console.log('error!!')
        })
      }).catch(() => {
      })
    },
    // deleteMember(data) {
    //   console.log("获取的额行数据" + JSON.stringify(data));
    //   var _this = this;
    //   this.$confirm("确认离职?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   })
    //     .then(() => {
    //         let form= {}
    //         form.id = data.id
    //         form.companyId = data.companyId
    //         form.memberId = data.memberId
    //         form.status = 2
    //       update(form)
    //         .then(response => {
    //           console.log(""+JSON.stringify(response) );
    //           _this.memberData.forEach(function(item, index) {
    //             if (item.id == data.id) {
    //               let data = _this.memberData.splice(index, 1);
    //             }
    //           });
    //           _this.$message({
    //             message: response.content,
    //             offset: 120,
    //             center: true
    //           });
    //         })
    //         .catch(error => {
    //           console.log("error!!");
    //         });
    //     })
    //     .catch(() => {});
    // },

    queryClick() {
        this.keyword.name = this.query.name;
        this.keyword.mobile = this.query.mobile;
        this.keyword.vip = this.query.vip;
        this.keyword.memo = this.query.memo;
        this.keyword.createYear = new Date(this.query.createYear).getFullYear();
        console.info("this.keyword--" + JSON.stringify(this.keyword));
        this.pageNum = 1;
        console.info("this.activeName--"+this.activeName)
        this.tabChangeRequest()

    },
    resetClick() {
      this.query.mobile = "";
      this.query.name = "";
      this.query.vip = "";
      this.keyword = this.query;
      this.pageNum = 1;
      this.tabChangeRequest()
    },

    //员工回复在职
    restoreMember(row) {
      var _this = this;
      console.log(row);
      this.$confirm("确认恢复?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let form= {}
            form.id = row.id
            form.companyId = row.companyId
            form.memberId = row.memberId
            form.status = 1
          update(form)
            .then(response => {
              console.log(response);
              _this.leaveMemberData.forEach(function(item, index) {
                if (item.id == row.id) {
                  let data = _this.leaveMemberData.splice(index, 1);
                }
              });
              _this.$message({
                message: response.content,
                offset: 120,
                center: true
              });
            })
            .catch(error => {
              console.log("error!!");
            });
        })
        .catch(() => {});
    },
    consumptionDetailClick(row) {
        console.log("row!!--"+JSON.stringify(row));
      this.$router.push({
        path: "/company/employeeConsumption",
        query: { employeeId: row.id, companyId:row.companyId, memberId:row.memberId}
      });
    },

    //重置缓存的滚动距离
    updateScroll() {
      if (this.status == 1) {
        window.sessionStorage.setItem("loadTopemployee-table1", 0);
        window.sessionStorage.setItem("loadLeftemployee-table1", 0);
      } else if (this.status == 0) {
        window.sessionStorage.setItem("loadTopemployee-table2", 0);
        window.sessionStorage.setItem("loadLeftemployee-table2", 0);
      }
    },

    formatRechargeList(data){
        if(data.length > 0){
                data.map((item)=>{
                    item.createDate = this.formatDateAndTime(item.createDate)
                    item.startDate = this.formatDate(item.startDate)
                    item.endDate = this.formatDate(item.endDate)
                })
            }
            return data
    },

    formatDateAndTime: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        return y + '-' + MM + '-' + d + " " + h + ":" + m + ":" + s;
      },
    formatDate: function(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      return y + "-" + MM + "-" + d;
    },

  }
};
</script>

<style scoped>
.el-footerBox {
  height: 50px !important;
  line-height: 50px !important;
  border-top: 1px solid #f2f2f2;
}

.deleted_OrderHeader {
  padding-top: 20px;
  padding-bottom: 15px;
  /* border-bottom: 1px solid #f2f2f2; */
}

.deleted_Row_Headings {
  font-size: 14px;
  color: #666666;
  width: 85px;
}

.deleted_OrderTitle {
  font-size: 14px;
}
</style>
